<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>设置-店员设置</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="./../css/comm.css" rel="stylesheet">
    <link href="./../css/setting.css" rel="stylesheet">
    <style type="text/css">
    	body{
			background-color: #fff;
		}
		.addShopAssiPerm,.modal-dialog,.modal-content{
			width: 400px;
			border-radius: 15px;
			margin:30px auto;
			overflow: hidden;
		}
		.form-control{
			border-radius: 5px;
		}
    </style>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- begin header -->
    <header>
        <nav class="navbar navbar-default" >
          <ul class="nav nav-tabs nav-justified" style="width: 100%;margin: 0 auto">
            <li>
              <i class="glyphicon glyphicon-menu-left"></i>
            </li>
            <li><h3>权限设置</h3></li>
			<li></li>
          </ul>
        </nav>
    </header>
    <!-- end header -->
    <!-- begin content -->
      <div class="content">
        <div class="content-main" style="margin: 0">
			<div class="btn-group shopAssiPerBtns">
			  <button type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-plus"></span> 添加 
			  </button>
			  <button type="button" class="btn btn-default">
			  <span class="glyphicon glyphicon-pencil"></span> 编辑
			  </button>
			</div>
			<table class="table members-table" id="data-table">
				<thead>
					<tr>
						<td>用户</td>
						<td>登录名</td>
						<td>用户角色</td>
						<td>用户名</td>
						<td>所属门诊</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
          </div>
      </div>
	  <!-- 模态框 -->
	  <div class="modal fade addShopAssiPerm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  		<div class="modal-dialog" role="document">
	  				<div class="modal-content">
	  						<div class="modal-header">
	  							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	  							<h4 class="modal-title" id="myModalLabel"></h4>
	  						</div>
	  						<!-- modal-body -->
	  						<div class="modal-body"></div>
	  						<!-- modal-body -->
	  						<div class="modal-footer"></div>
	  				</div>
	  		</div>
	  </div>
      <!-- end content -->
      <footer>
          <nav class="navbar navbar-default" >
          <ul class="nav nav-tabs nav-justified" style="width: 100%;margin: 0 auto">
            <li >
              在线问诊
            </li>
            <li>
              在线审方
            </li>
            <li>
              含麻登记
            </li>
            <li>
              会员中心
            </li>
            <li class="active">
              设置
            </li>
          </ul>
        </nav>
      </footer>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../asset/js/jquery.min.js"></script>
    <script src="../asset/js/bootstrap.min.js"></script>
		<script src="../asset/js/bootstrap-table.min.js"></script>
		<script src="../js/comm.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			var tbodyHTML='';
			$.asyncAx(
			    '/web/basePersonnel/queryMenuRole',
			     null,
			     null,
			     null,
			     null,
			     function(data){
							if(data.res==1){
								for (var i=0;i<data.obj.length;i++) {
									tbodyHTML+='<tr>'+
																'<td>'+data.obj[i].name+'</td>'+
																'<td>'+data.obj[i].username+'</td>'+
																'<td>'+data.obj[i].role+'</td>'+
																'<td>51012199505256621</td>'+
																'<td>华安堂建设南路店</td>'+
																'<td></td>'+
															'</tr>';
								}
								$('#data-table tbody').html(tbodyHTML);
							}
			     },
			     function(){
			
							}
			     );
			/* 添加店员权限 */
			$('.shopAssiPerBtns button:nth-child(1)').click(function(){
				$('#myModal').modal('show');
				$('#myModalLabel').html('新增管理');
				var formHTML='<form class="form-horizontal">'+
								  '<div class="form-group">'+
									'<label for="inputEmail3" class="col-sm-3 control-label">登录名</label>'+
									'<div class="col-sm-9">'+
									  '<input type="email" class="form-control" id="inputEmail3" placeholder="请输入登录名">'+
									'</div>'+
								  '</div>'+
								  '<div class="form-group">'+
									'<label for="inputPassword3" class="col-sm-3 control-label">密码</label>'+
									'<div class="col-sm-9">'+
									  '<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">'+
									'</div>'+
								  '</div>'+
								  '<div class="form-group">'+
									  '<label for="inputEmail3" class="col-sm-3 control-label">用户角色</label>'+
									  '<div class="col-sm-9">'+
										'<select class="form-control">'+
										  '<option>1</option>'+
										  '<option>2</option>'+
										  '<option>3</option>'+
										  '<option>4</option>'+
										  '<option>5</option>'+
										'</select>'+
									  '</div>'+
								  '</div>'+
								  '<div class="form-group">'+
								  	'<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>'+
								  	'<div class="col-sm-9">'+
								  	'<select class="form-control">'+
								  		'<option>1</option>'+
								  		'<option>2</option>'+
								  		'<option>3</option>'+
								  		'<option>4</option>'+
								  		'<option>5</option>'+
								  	'</select>'+
								  	'</div>'+
								  '</div>'+
								'</form>';
				$('.modal-body').html(formHTML);
				var footHTML='<button type="button" class="btn btn-default">取消</button>'+
							 '<button type="button" class="btn btn-primary">确认</button>';
				$('.modal-footer').html(footHTML);
			})
			/* 编辑店员权限 */
			$('.shopAssiPerBtns button:nth-child(2)').click(function(){
				$('#myModal').modal('show');
				$('#myModalLabel').html('编辑管理');
				var formHTML='<form class="form-horizontal">'+
								'<div class="form-group">'+
									'<label for="inputEmail3" class="col-sm-3 control-label">登录名</label>'+
									'<div class="col-sm-9">'+
									'<input type="email" class="form-control" id="inputEmail3" placeholder="请输入登录名">'+
									'</div>'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="inputPassword3" class="col-sm-3 control-label">原密码</label>'+
									'<div class="col-sm-9">'+
									'<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">'+
									'</div>'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="inputPassword4" class="col-sm-3 control-label">重置密码</label>'+
									'<div class="col-sm-9">'+
									'<input type="password" class="form-control" id="inputPassword4" placeholder="请输入密码">'+
									'</div>'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="inputEmail3" class="col-sm-3 control-label">用户角色</label>'+
									'<div class="col-sm-9">'+
										'<select class="form-control">'+
										'<option>1</option>'+
										'<option>2</option>'+
										'<option>3</option>'+
										'<option>4</option>'+
										'<option>5</option>'+
										'</select>'+
									'</div>'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>'+
									'<div class="col-sm-9">'+
									'<select class="form-control">'+
										'<option>1</option>'+
										'<option>2</option>'+
										'<option>3</option>'+
										'<option>4</option>'+
										'<option>5</option>'+
									'</select>'+
									'</div>'+
								'</div>'+
								'</form>';
				$('.modal-body').html(formHTML);
				var footHTML='<button type="button" class="btn btn-default">取消</button>'+
							'<button type="button" class="btn btn-primary">确认</button>';
				$('.modal-footer').html(footHTML);
			})
		})
		/* 获取当前选中的行数据 */
// 		var getSelectRows = $("#data-table").bootstrapTable('getSelections', function (row) {
// 			console.log(row)
//           return row;
// 		});
	</script>
  </body>
</html>